<template>
  <div class="newsImgBody">
    <div class="container">
      <div class="row topDescBox">
        <div class="descBox">
          <div class="leftLine"></div>
          <div class="middleInfo">
            <div class="iconfont xinwen2 leftIcon"></div>
            <div class="bottomLeftInfo">{{'新闻咨询'}}</div>
          </div>
          <div class="rightLine"></div>
        </div>

      </div>
      <div class="row newsBox">
        <div class="leftNewsBox">
          <div class="newsBodyBox">
            <div class="allHeightBox">
              <div class="imgNewsBox" >
                <div class="topImgBox">
                  <el-image class="img" :alt="articleActive[0]?.seoKeyword.toString()" :src="articleActive[0]?.picList[0]" :fit="'cover'"></el-image>
                </div>
                <div class="bottomDescBox">
                  <div class="descTitle" @click="inDetail(articleActive[0])">{{articleActive[0]?.name}}</div>
                  <div class="descContent">{{articleActive[0]?.seoTitle}}</div>
                  <div class="descFooter">
                    <div class="descType">{{'最新动态News'}}</div><!-- ARTICLE_TYPE | optionObjectKV(articleActive[0].typeId) -->
                    <div class="descLine"></div>
                    <div class="descTime">{{articleActive[0]?.updateTime}}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="halfHeightBox">
              <div class="halfHeight">
                <div class="imgNewsBox" >
                  <div class="topImgBox">
                    <el-image class="img" :alt="articleActive[0]?.seoKeyword.toString()" :src="articleActive[1]?.picList[0]" :fit="'cover'"></el-image>
                  </div>
                  <div class="bottomDescBox noPaddingBottom">
                    <div class="descTitle" @click="inDetail(articleActive[1])">{{articleActive[1]?.name}}</div>
                    
                    <div class="descFooter">
                      <div class="descType">{{'最新动态News'}}</div><!--ARTICLE_TYPE | optionObjectKV(articleActive[1].typeId)-->
                      <div class="descLine"></div>
                      <div class="descTime">{{articleActive[1]?.updateTime}}</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="halfHeight">
                <div class="imgNewsBox" >
                  <div class="topImgBox">
                    <el-image class="img squareBox" :alt="articleActive[0]?.seoKeyword.toString()" :src="articleActive[2]?.picList[0]" :fit="'cover'"></el-image>
                  </div>
                  <div class="absDescBox">
                    <div class="descTitle" @click="inDetail(articleActive[2])">{{articleActive[2]?.name}}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>
        <div class="rightNewsBox">
          <div class="rightNewsList">
            <div class="newsItem" v-for="(item,index) in articleActive.slice(3)" :key="index" >
              <div class="itemTitle" @click="inDetail(item)">{{item?.name}}</div>
              <div class="descFooter">
                <div class="descType">{{'最新动态News'}}</div><!-- ARTICLE_TYPE | optionObjectKV(item.typeId) -->
                <div class="descLine"></div>
                <div class="descTime">{{item?.updateTime}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>

const $emit=defineEmits()

const props= defineProps({
  imgCount:{
    type:Number,
    default:0
  }
})

let articles=[]
let articleActive= []
let currentCat=''
let activeId=''
let products=[]

let {data,error,refresh}= await GetNewsList()

// let {data,error}= await useFetch('/business/client/article/index/list',{
//     baseURL:'http://39.104.21.39:8899',
//     query: {
//       // domain:'www.xinshenghe999.com'
//     },
//     key:'MainNews',
//     headers:{
//       'Content-Type': 'application/json',
//       'domain':'www.xinshenghe999.com'
//     },
//     server:true,
//     lazy:true,
//     //响应数据接收
//     transform: (res) => {
//       // console.log('res-------',res)
//       return res.responseData
//     }
//   })

  if(process.server && error.value){

    throwError((error.value?.data,error.value?.data.error+': '+error.value?.data.status),'页面加载失败，请联系客服！')
  }
  
  if(data.value?.length>0){

    // console.log("data---：",data)
    for(let i=0;i<data.value.length;i++){
      data.value[i].updateTime = data.value[i].updateTime.substring(0, 16);
      articles=data.value
      if(data.value[i].typeId==21){
        articleActive.push(data.value[i])
      }
    }

    // console.log("新闻列表：",articles)
    
    // articles.map((item,i)=>{
    //   if(item.typeId == 21){
    //     articles[i].createTime = articles[i].createTime.substring(0, 10);
    //     articleActive.push(articles[i])
    //   }
    // })
    
    console.log("articles：",articles)
    console.log("articleActive: ",articleActive)
  }


watch(
  ()=>props.imgCount,(newVal,oldVal)=>{
    console.log("imgCount: ",newVal)
    //重新请求接口
    refresh()
  },{immediate:true,deep:true}
)


function inDetail(item){
  console.log("inDetail",item)
}

</script>

<style lang="scss" scoped>
@import '@/assets/css/common.scss';
@import '@/assets/css/index.scss';
.newsImgBody{
  padding-top: 20px;
  position: relative;
  z-index: 0;
  clear: both; /*clear取消默认继承上一级标签属性*/
  background-color: #fff;
  .container{
    width: 70%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
  }
}
/*顶部标题*/
.topDescBox {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    
    .leftLine {
      position: absolute;
      left: 10px;
      top: -10px;
      width: 5px;
      height: 50px;
      background-color: #ffffff;
      transform: rotateZ(45deg);
    }

    .rightLine {
      position: absolute;
      right: 10px;
      bottom: -20px;
      width: 5px;
      height: 50px;
      background-color: #ffffff;
      transform: rotateZ(45deg);
    }

    .middleInfo {
      /*width: 40%;*/
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      font-style: italic;
      letter-spacing: 0.15em;
      color: white;
    }

    .leftIcon {
      font-size: 28px;
      color: #ffffff;
      margin-right: 10px;
    }

    .descBox {
      padding: 5px 0;
      width: 30%;
      min-width: 200px;
      /*background-color: #006497;*/
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      /* 背景渐变色 - 原理2 */
      background: linear-gradient(-45deg, #006497, #3ce78f, #23a6d5, #23d5ab);
      /* 背景尺寸 - 原理3 */
      background-size: 300% 300%;
      /* 循环动画 - 原理4 */
      animation: gradientBG 8s ease infinite;
      margin-bottom: 15px;
      // border-radius: 10px;
   
    }
  }

  

  /* 动画，控制背景 background-position */
  @keyframes gradientBG {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }

  

/*新闻模块**/
.newsBox {
  width: 100%;
  margin-left: -25px;
    display: flex;
    position: relative;
    .leftNewsBox {
      width: 65%;
      height: 100%;
      padding: 20px;
      position: relative;
      .newsBodyBox {
        width: 100%;
        height: 100%;
        display: flex;
        position: relative;
        .allHeightBox {
          width: 60%;
          display: flex;
          margin-right: 20px;
          box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
        }
        .imgNewsBox {
          height: 100%;
          width: 100%;
          padding-bottom: 20px;
          position: relative;

          .topImgBox{
            height: 70%;
            display: flex;
            &:hover,&:focus{
              .img{
                transform: scale(1.08);
              }
              
            }
            .img {
              width: 100%;
              max-height: 215px;
              overflow: hidden;
              transition: 500ms;
              border-radius: 10px;
              
            }
          } 
        }
      }
    }
  }
  
  @media (min-width: 1200px) {
    .allHeightBox .imgNewsBox .topImgBox .img{
      max-height: 380px !important;
    }
  }


  .descTitle, .itemTitle {
    cursor: pointer;
  }

  .descTitle:hover, .descTitle:focus, .itemTitle:hover, .itemTitle:focus {
    color: #005aab !important;
  }

  .bottomDescBox {
    padding: 10px 10px 20px 10px;
    .descTitle {
      font-size: 20px;
      font-weight: bold;
      font-stretch: normal;
      letter-spacing: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .descContent {
      font-size: 16px;
      line-height: 22px;
      letter-spacing: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #999999;
      margin: 10px 0;
    }
  }

  .descFooter {
    width: 100%;
    display: flex;
    align-items: center;
    .descType {
      font-size: 12px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 21px;
      letter-spacing: 0px;
      color: #005aab;
    }
    .descLine {
      margin: 0 10px;
      color: #cccccc;
      font-size: 12px;
      position: relative;
      font-size: 0;
      background: #cccccc;
      width: 1px;
      height: 11px;
      display: inline-block;
    }
    .descTime {
      font-size: 14px;
      line-height: 20px;
      position: relative;
      letter-spacing: 0px;
      color: #cccccc;
    }
  }

  .halfHeightBox {
    width: 40%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    .halfHeight {
      width: 100%;
      height: 50%;
      position: relative;
    }
  }

  .absDescBox {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 94%;
    padding: 0 10px;
    background-color: rgba(0, 0, 0, .3);
    .descTitle {
      color: #ffffff;
      font-size: 16px;

    }
  }

  .rightNewsBox {
    width: 33%;
    padding: 20px 0;
    display: flex;
    .rightNewsList {
      width: calc(100% - 20px);
      height: auto;
      display: flex;
      flex-direction: column;
      padding: 20px;
      box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
      transition: 500ms;
      border-radius: 10px;
      &:hover,&:focus{
        transform: scale(1.04);
      }
      .newsItem {
        width: 100%;
        display: flex;
        flex-direction: column;
        padding-bottom: 10px;
        margin-bottom: 15px;
        border-bottom: 1px dashed #e6e4e7;
        border-right: 1px dashed #e6e4e7;
        border-top-right-radius: 50%;
        &:first-child {
          margin-top: 10px;
        }
        &:last-child {
          margin-bottom: 0;
          padding-bottom: 0;
        }

        .itemTitle {
          width: 100%;
          display: flex;
          font-size: 20px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 21px;
          letter-spacing: 0px;
          margin-bottom: 5px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          color: #666666;
        }
      }
    }
  }

  .noPaddingBottom {
    padding-bottom: 0 !important;
  }


</style>